<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery-1.7.1.js"></script>
<title>统计报表1</title>
<link rel="stylesheet" href="../css/06TJBB.css">
</head>

<body>
<div class="body">
<div class="top">
  <div class="nav-top">
     <div id="menu_left">
	   <img src="../image/02main.jpg" />
     </div>
     <div class="title">
       <img class="img1" src="../image/daohangtiao1.jpg" />
       <div class="tab">
         <table>
           <tr>
              <td><a href="#" style="margin-left:6px; color:#cfdef7; font-family:黑体; font-size:12px;">我的中心</a></td>
           </tr>
         </table>
       </div>
       <img class="img2" src="../image/daohangtiao1.jpg" />
       <div class="tab">
         <table>
           <tr>
              <td><a href="#" style="margin-left:80px; color:#cfdef7; font-family:黑体; font-size:12px;">在线登记</a></td>
              <td><a href="#" style="color:#cfdef7; font-family:黑体;">×</a></td>
           </tr>
         </table>
       </div>
       <img class="img3" src="../image/daohangtiao1.jpg" />
       <div class="tab">
         <table>
           <tr>
              <td><a href="#" style="margin-left:165px; color:#cfdef7; font-family:黑体; font-size:12px;">工时查询</a></td>
              <td><a href="#" style="color:#cfdef7; font-family:黑体;">×</a></td>
           </tr>
         </table>
       </div>
       <img class="img4" src="../image/daohangtiao2.jpg" />
       <div class="tab">
         <table>
           <tr>
              <td><a href="#" style="margin-left:250px; color:#006ce0; font-family:黑体; font-size:12px;"><b>统计报表</b></a></td>
              <td><a href="#" style="color:#a1a4a6; font-family:黑体;"><b>×</b></a></td>
           </tr>
         </table>
       </div>
     </div>
     <div class="menu_rigth">
       <p style="font-size:14px; color:#FFF;">欢迎您，</p><p class="p1">刘小芸</p>
       <ul>
         <li class="li1"><a href="#"><img src="../image/daohangtiao_suo.jpg" style="margin-left:110px; width:18px; height:18px;"/></a></li>
         <li class="li2"><a href="#"><img src="../image/daohangtiao_out.jpg" style="margin-left:140px; width:18px; height:18px;" /></a></li>
       </ul>
     </div>
  </div>
</div>


<div class="content">
  <div class="content1">
     <div class="content2">
       <div class="div1">
    	 <div class="div1">
    	   <span>查询时间</span>
           <input type="date" value="2016-03-01" class="input2"/> - <input type="date" value="2016-03-01" class="input2"/>
           <button class="button3">查询</button>
       </div>
       
       <div class="div2">
       <h4>&nbsp;团队工时统计</h4>
       <div id="container1"></div>
       <script type="text/javascript">
	       var dom = document.getElementById("container1");
           var myChart = echarts.init(dom);
           option = null;
           option = {
			   tooltip: {
				   trigger: 'item',
				   formatter: '{a} <br/>{b}: {c}h ({d}%)'
			   },
			   series: [
				   {
						name: '团队：CRM应用团队',
						type: 'pie',
						radius: ['25%', '50%'],
						startAngle:180,
						labelLine: {
							normal: {
								length: 15,
								length2: 70
							}
						},
						label: {
							formatter: '{b|{a}}\n {b|{b}：}{b|{c}h}  {per|{d}%} ',
							borderWidth: 20,
							borderRadius: 4,
							padding: [20, -30],
							rich: {
								a: {
									float:'left',
									color: '#999',
									lineHeight: 20,
									align: 'center',
								},
								b: {
									fontSize: 14,
									lineHeight: 33
								},
								per: {
									color: '#eee',
									backgroundColor: '#5a7087',
									padding: [2, 3],
								    borderRadius: 2,
								}
							}
						},
						data: [
						    {value: 400, name: '工时',itemStyle:{color: '#ff9b77'}},
                            {value: 258, name: '工时',itemStyle:{color: '#ffe171'}},
							{value: 142, name: '工时',itemStyle:{color: '#bddc7f'}}
					    ]
					}
				]
			};;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
       </script>
       </div>
       
       <div class="div3">
       <h4>&nbsp;员工工时统计</h4>
         <div>
           <p class="p2">加班时长[h]</p>
           <p class="p3">加班次数[次]</p>
         </div>
       <div id="container2"></div>
       <div id="container"></div>
       <script type="text/javascript">
	       var dom = document.getElementById("container");
		   var myChart = echarts.init(dom);
		   option = null;
		   option = {
			   title: {
				   text: ''
			   },
			   grid: {
				   left: '3%',
				   right: '30%',
				   bottom: '13%',
				   top:'10%',
				   containLabel: true
			   },
			   tooltip: {
				   // trigger: 'axis',
				   showDelay: 0,
				   formatter: function (params) {
					   if (params.value.length > 1) {
						   return params.seriesName + ' :<br/>'
						   + params.value[0] + '次 '
						   + params.value[1] + 'h ';
					   }else {
						   return params.seriesName + ' :<br/>'
						   + params.name + ' : '
						   + params.value + 'h ';
					   }
				   },
				   axisPointer: {
					   show: true,
					   type: 'cross',
					   lineStyle: {
						   type: 'dashed',
						   width: 1
					   }
				   }
		      },
			  legend: {
				  data: ['黄盼盼','何亚丽','陆巧敏','郑思木','宝清','郭伊纳','李婷婷','黄辉祥','蒋伶俐','沈夏琳','何玉卓', '马琳','含韵','马卓宇','晓谕轩','范不贤','张靓颖', '文晓','宇豪','天明','叶铭瑄','肖亮','佑大同','邱敏','韩旭','明小米','周广科','琳琳'],
				  right: 'left',
				  orient: 'vertical',
				  padding:(10,10),
				  margin:(10,10)
			  },
			  xAxis: [
			  {
				  data:['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'],
				  type: 'category',
				  scale: true,
				  splitLine: {
					  show: false
				  }
			  }],
			  yAxis: [
			  {
				  type: 'value',
				  scale: true,
				  axisLabel: {
					  formatter: '{value} '
				  },
				  splitLine: {
					  show: true
				  }
			  }],
			  series: [
			  {
				  
				  name: '黄盼盼',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#8ca028"}},
				  label: {
					   position: 'inner'
				  },
				  data: [
				     [12, 191,'黄盼盼']
			  ],
              markLine: {
                  lineStyle: {
                      type: 'dasked',
					  color:'#ff6500',
					  borderWidth:3
                  },
                  data: [
                      { xAxis: 10 },
					  { yAxis: 20 }
                  ]
              }
             },
		      {
				  name: '何亚丽',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#5a2db5"}},
				  data: [
					 [10, 184,'何亚丽']
			       ],
			  },
			  {
				  name: '陆巧敏',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#a756f9"}},
				  data: [
					 [23, 178,'陆巧敏']
			       ],
			  },
			  {
				  name: '郑思木',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#0066cc"}},
				  data: [
					 [17, 158,'郑思木']
			       ],
			  },
			  {
				  name: '宝清',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#99cc33"}},
				  data: [
					 [20, 150,'宝清']
			       ],
			  },
			  {
				  name: '郭伊纳',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#9d0c6d"}},
				  data: [
					 [6, 137,'郭伊纳']
			       ],
			  },
			  {
				  name: '李婷婷',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#33cc99"}},
				  data: [
					 [12, 119,'李婷婷']
			       ],
			  },
			  {
				  name: '黄辉祥',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#8ca0b4"}},
				  data: [
					 [26, 113,'黄辉祥']
			       ],
			  },
			  {
				  name: '蒋伶俐',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#99cc00"}},
				  data: [
					 [22, 83,'蒋伶俐']
			       ],
			  },
			  {
				  name: '沈夏琳',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#b48cc8"}},
				  data: [
					 [13, 82,'沈夏琳']
			       ],
			  },
			  {
				  name: '何玉卓',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#01060c"}},
				  data: [
					 [10, 80,'何玉卓']
			       ],
			  },
			  {
				  name: '马琳',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#4c545d"}},
				  data: [
					 [12, 79,'马琳']
			       ],
			  },
			  {
				  name: '含韵',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#006ce0"}},
				  data: [
					 [24, 78,'含韵']
			       ],
			  },
			  {
				  name: '马卓宇',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#ff9966"}},
				  data: [
					 [6, 77,'马卓宇']
			       ],
			  },
			  {
				  name: '晓谕轩',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#0066cc"}},
				  data: [
					 [8, 77,'晓谕轩']
			       ],
			  },
			  {
				  name: '范不贤',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#ce0c3c"}},
				  data: [
					 [15, 76,'范不贤']
			       ],
				    markArea: {
				  silent: true,
				  itemStyle: {
					  color: '#e1e1ff',
					  opacity: 0.7  
				  },
				  data: [
				      [{
						  name: '劳苦区',
						  label:{
							   show: true,
							   position: "inside", // markArea中文字（name）位置
							   offset: [0, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
							   color: "#ff86ff" // markArea中文字（name）颜色
						   },
						  xAxis: 10,
						  yAxis:20
					  }, 
					  {
						  yAxis:200
					  }]
				  ]
			  },
			  },
			  {
				  name: '张靓颖',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#7caee1"}},
				  data: [
					 [14, 75,'张靓颖']
			       ],
			  },
			  {
				  name: '文晓',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#0b0b0a"}},
				  data: [
					 [9, 72,'文晓']
			       ],
			  },
			  {
				  name: '宇豪',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#cc0033"}},
				  data: [
					 [8, 70,'宇豪']
			       ],
				   markArea: {
					   silent: true,
					   itemStyle: {
						   color: '#d5f4ff',
						   opacity: 0.7
					   },
					   data: [
				       [{
						   name: '清闲区',
						   label:{
							   show: true,
							   position: "inside", // markArea中文字（name）位置
							   offset: [0, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
							   color: "#87dcff" // markArea中文字（name）颜色
						   },
					   }, 
					   {
						   xAxis:10,
						   yAxis:20
					   }]
				       ]
			      },
			  },
			  {
				  name: '天明',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#274103"}},
				  data: [
					 [9, 68,'天明']
			       ],
			  },
			  {
				  name: '叶铭瑄',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#d6f9a5"}},
				  data: [
					 [21, 65,'叶铭瑄']
			       ],
			  },
			  {
				  name: '肖亮',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#88bfea"}},
				  data: [
					 [13, 64,'肖亮']
			       ],
			  },
			  {
				  name: '佑大同',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#106e9f"}},
				  data: [
					 [10, 64,'佑大同']
			       ],
			  },
			  {
				  name: '邱敏',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#eb6692"}},
				  data: [
					 [9, 60,'邱敏']
			       ],
			  },
			  {
				  name: '韩旭',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#633d2f"}},
				  data: [
					 [7, 55,'韩旭']
			       ],
			  },
			  {
				  name: '明小米',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#cc1c67"}},
				  data: [
					 [9, 54,'明小米']
			       ],
			  },
			  {
				  name: '周广科',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#ede2be"}},
				  data: [
					 [7, 52,'周广科']
			       ],
				   markArea: {
					   silent: true,
					   itemStyle: {
						   color: '#ffe6f8',
						   opacity: 0.7
					   },
					   data: [
				       [{
						   name: '精英区',
						   label:{
							   show: true,
							   position: "inside", // markArea中文字（name）位置
							   offset: [0, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
							   color: "#b7b0fa" // markArea中文字（name）颜色
						   },
						   xAxis:10,
						   yAxis:0
					   }, 
					   {
						   yAxis:20
					   }]
				       ]
			      },
			  },
			  {
				  name: '琳琳',
				  type: 'scatter',
				  itemStyle:{ normal: {color: "#ff6666"}},
				  data: [
					 [2, 10,'琳琳']
			       ],
				   markArea: {
					   silent: true,
					   itemStyle: {
						   color: '#ffe6f8',
						   opacity: 0.7
					   },
					   data: [
				       [{
						   name: '精英区',
						   label:{
							   show: true,
							   position: "inside", // markArea中文字（name）位置
							   offset: [0, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
							   color: "#b7b0fa" // markArea中文字（name）颜色
						   },
						   yAxis:20
					   }, 
					   {
						   
						   xAxis: 10,
						   yAxis:200
					   }]
				       ]
			      },
			  }
          ]
       };;
	   if (option && typeof option === "object") {
		   myChart.setOption(option, true);
	   }
     </script>
        <div class="content4">
          <a href="#"><img src="../image/dian.jpg" /></a>
          <a href="#"><img src="../image/list.jpg" /></a>
        </div>
        <div class="content3">
          <p class="p4">员工姓名</p>
        </div>
       </div>
     </div>
  </div>
</div>


<div class="bottom">
   Copyright © 2015 中国电信股份有限公司福建分公司. All Rights Reserved
</div>
</div>
</body>
</html>
